<template>
  <view class="pressure">
    <scroll-view scroll-y class="scroll_view">
      <view class="score-container">
        <view class="swiper-content">
          <!-- 健康评分 -->
          <view class="score-box">
            <view class="score-title">
              活动评分
              <uni-icons
                type="info"
                class="info-icon"
                size="20"
                color="#666666"
              ></uni-icons>
            </view>
            <view class="score-value">{{ score }}</view>
            <view class="score-desc">
              <view class="score-desc-item">
                <view class="score-line line-left"></view>
                <view class="score-block"></view>
              </view>
              <view class="score-desc-text">超过了74%的用户</view>
              <view class="score-desc-item">
                <view class="score-block"></view>
                <view class="score-line line-right"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 健康建议 -->
      <view class="advice-box">
        <view class="advice-title">智慧健康建议</view>
        <view class="advice-content">
          提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
        </view>
        <view class="ai-btn">
          <AiPointReport></AiPointReport>
        </view>
      </view>
      <view
        style="
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 16px;
          color: #666666;
        "
        ><text>恢复指标</text
        ><text style="float: right">{{ chooseDate }}</text></view
      >
      <view class="chart_item">
        <view class="chart_container">
          <view class="head">
            <text class="title">睡眠满足度</text>
            <uni-icons
              type="info"
              class="info-icon"
              size="20"
              color="#666666"
            ></uni-icons>
          </view>

          <view class="sleep-container">
            <view class="sleep-info-container">
              <view class="sleep-item">
                <view style="color: #6f87ff"
                  >实际睡眠时长 - {{ actualSleepHours }}h
                  {{ actualSleepMinutes }}min</view
                >
              </view>
              <view class="sleep-item">
                <view style="color: #666666"
                  >推荐睡眠时长 - {{ recommendedSleepHours }}h
                  {{ recommendedSleepMinutes }}min</view
                >
              </view>
            </view>
            <view class="sleep-line-container">
              <image
                src="/static/health/line.png"
                mode="widthFix"
                style="width: 100%; height: 100%"
              ></image>
            </view>
            <view class="progress-container">
              <canvas
                class="progress-circle"
                canvas-id="sleepProgress"
              ></canvas>
              <text class="progress-percentage">{{ sleepRatioPercent }}</text>
            </view>
          </view>

          <!-- <table>
            <tr>
              <td
                rowspan="2"
                colspan="2"
                class="sleep-time-cell"
                style="vertical-align: middle"
              >
                <text style="font-size: 14px; color: #6f87ff"
                  >实际睡眠时长 {{ actualSleepHours }}h
                  {{ actualSleepMinutes }}min</text
                >
              </td>
              <td rowspan="4" class="image-cell">
                <image
                  src="/static/health/line.svg"
                  mode="widthFix"
                  style="width: 100%"
                ></image>
              </td>
              <td rowspan="3" class="progress-cell">
                <view class="progress-container">
                  <canvas
                    class="progress-circle"
                    canvas-id="sleepProgress"
                  ></canvas>
                  <text class="progress-percentage">{{
                    sleepRatioPercent
                  }}</text>
                </view>
              </td>
            </tr>
            <tr></tr>
            <tr>
              <td
                rowspan="2"
                colspan="2"
                class="sleep-time-cell"
                style="vertical-align: middle"
              >
                <text style="font-size: 14px; color: #666666"
                  >推荐睡眠时长 {{ recommendedSleepHours }}h
                  {{ recommendedSleepMinutes }}min</text
                >
              </td>
            </tr>
            <tr></tr>
          </table> -->
        </view>
      </view>
      <!-- 压力 -->
      <view class="card pressure" :class="{ noDay: selectType !== 'day' }">
        <view class="head">
          <view class="title">
            <view class="title-text">
              <view class="title-content"> 压力指数 </view>
              <TagState></TagState>
            </view>
            <uni-icons
              type="info"
              class="info-icon"
              size="20"
              color="#666666"
            ></uni-icons>
          </view>
          <!--          <uni-icons type="info-filled" class="ml-10rpx" size="20" color="#666666" @click="openTip"></uni-icons>-->
          <view class="value"></view>
        </view>
        <view class="value">
          <text style="font-size: 30px">{{ pressure.averageNum }}</text>
          <br />
          <text style="font-size: 14px; color: #999999"
            >范围：{{ pressure.min }} - {{ pressure.max }}</text
          >
        </view>
        <view class="chart" @touchmove.stop>
          <!-- <view v-if="notDataOrLoading" class="noData_loading_mask">
            {{ !pressure.loading ? "暂无数据" : "加载中..." }}
          </view> -->
          <l-echart ref="chartRef"></l-echart>
        </view>
        <view
          style="
            height: 40px;
            background-color: #e0e7f6;
            color: #aa85cb;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            border-radius: 10px;
          "
        >
          <text>最新：{{ pressure.latestOne.time }}</text
          ><text>{{ pressure.latestOne.value }}</text>
        </view>
        <!--        <view v-if="selectType === 'day' && pressure.averageNum" class="range">
          <view class="des">
            <view class="desTop">
              <view class="dot"></view>
              <view class="titleTime text-#AFAFAF"> 范围 </view>
            </view>
            <view class="value">{{ pressure.min }} - {{ pressure.max }} <text class="unit">%</text></view>
          </view>
        </view>-->
      </view>
      <view class="half-card-parent">
        <view class="half-card">
          <view class="head">
            <view class="title"> 静息心率 </view>
            <uni-icons type="info" class="info-icon" size="20"></uni-icons>
          </view>
          <view>
            <view class="value"
              ><text style="font-size: 30px">{{ heart.min }}</text
              ><text style="color: #999999; margin-right: 10px">次/分钟</text>
              <TagState></TagState>
            </view>

            <view class="value"
              ><text style="font-size: 12px; color: #999999"
                >推荐值：45-55次/分</text
              ></view
            >
          </view>
        </view>
        <view class="half-card">
          <view class="head">
            <view class="title"> HRV </view>
            <uni-icons type="info" class="info-icon" size="20"></uni-icons>
          </view>
          <view>
            <view class="value"
              ><text style="font-size: 30px">{{ hrv.averageNum }}</text
              ><text style="color: #999999; margin-right: 10px">ms</text>
              <TagState></TagState>
            </view>
            <view class="value"
              ><text style="font-size: 12px; color: #999999"
                >推荐值：{{ hrv.allData.hrvModel.config.min }}-{{
                  hrv.allData.hrvModel.config.max
                }}ms</text
              ></view
            >
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { queryMySleepInfoByDay } from "@/api/ring/chart.js";
import AiPointReport from "@/pages/ring/components/AiPointReport.vue";
import * as echarts from "echarts";
import { getPressureData } from "@/api/ring/report.js";

import TagState from "@/components/tag-state/index.vue";

import {
  queryMyHeartInfoByDay,
  queryMyHeartInfoByMonth,
  queryMyHeartInfoByWeek,
  queryMyHrvInfoByDay,
  queryMyHrvInfoByWeek,
  queryMyHrvInfoByMonth,
  queryMyPressureInfoByDay,
  queryMyPressureInfoByWeek,
  queryMyPressureInfoByMonth,
} from "@/api/ring/chart.js";

import pImage from "@/static/ring/chart/pressure.png";

const tip_zh = `
压力监测通过心率和HRV结合，评估用户处于压力或放松状态。

全天记录压力水平，1-29表示放松，30-59表示正常压力，60-79表示中等压力，80-100表示高压力。

运动模式下不计算压力值，以确保数据准确性。

注：本设备提供的检测数据仅用于日常健康管理辅助参考，不可替代专业医疗诊断。
`;

const _options = {
  grid: {
    left: "1%",
    right: "15",
    top: "10",
    bottom: "2",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  xAxis: [
    {
      show: true,
      type: "category",
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(141, 141, 141, 0.3)",
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        color: "rgba(0, 0, 0, 0.5)",
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(141, 141, 141, 0.3)",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      min: 0,
      position: "right",
      splitLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "rgba(141, 141, 141, 0.3)",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(141, 141, 141, 0.3)",
        },
      },
      axisLabel: {
        show: true,
        //坐标轴刻度标签的相关设置
        color: "rgba(0, 0, 0, 0.5)",
      },
    },
  ],
};

export default {
  props: {
    selectDateInfo: Object,
  },
  components: {
    AiPointReport,
    TagState,
  },
  data() {
    return {
      score: 76,
      chooseDate: "",
      selectType: "day",
      actualSleepHours: "0",
      actualSleepMinutes: "0",
      recommendedSleepHours: "0",
      recommendedSleepMinutes: "0",
      sleepRatio: 0,
      sleepRatioPercent: "--%",
      pressure: {
        showTip: false,
        tipText: tip_zh,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthModelValue: 0,
        loading: false,
        empty: false,
        latestOne: {},
      },
      heart: {
        showTip: false,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
        allData: {
          heartbeatModel: {
            config: {
              min: 0,
              max: 0,
            },
          },
        },
      },
      hrv: {
        showTip2: false,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
        allData: {
          hrvModel: {
            config: {
              min: 0,
              max: 0,
            },
          },
        },
      },
    };
  },

  computed: {
    notDataOrLoading() {
      const data = this.pressure.chartData;
      return !data || !Array.isArray(data) || !data.length;
    },

    optionsByDay() {
      return {
        ..._options,
        series: [
          {
            type: "line",
            barWidth: 6,
            smooth: true,
            lineStyle: {
              width: 1.5,
              color: "#CCCCCC",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbolSize: 5,
            symbol: "circle",
            itemStyle: {
              color: "#AA85CB",
            },
            data: this.pressure.chartData,
          },
        ],
      };
    },
    optionsByOther() {
      return {
        ..._options,
        series: [
          {
            name: "压力",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 1.5,
              color: "#CCCCCC",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              color: "#AA85CB",
            },
            data: this.pressure.chartData,
          },
        ],
      };
    },
  },

  watch: {
    selectDateInfo: {
      handler(nv) {
        const param = {
          type: "day",
          startTime: nv.fulldate,
        };
        this.chooseDate = dayjs(nv.fulldate).format("MM月DD日");
        this.pressureOnChange(param);
        this.updateChartData(nv.fulldate);
        this.heartRateOnChange(param);
        this.hrvOnChange(param);
        this.updatePressureData(nv.fulldate);
      },
      immediately: true,
      deep: true,
    },

    optionsByDay: {
      handler(nv) {
        if (this.selectType === "day") {
          if (this.pressure.chart) {
            this.pressure.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },

    optionsByOther: {
      handler(nv) {
        if (this.selectType !== "day") {
          if (this.pressure.chart) {
            this.pressure.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },
  },

  async mounted() {
    if (!this.pressure.chartRef) {
      this.pressure.chartRef = this.$refs.chartRef;
    }
    if (this.pressure.chartRef) {
      this.pressure.chart = await this.pressure.chartRef.init(echarts);
    }
    let currentDate = dayjs().format("YYYY-MM-DD");
    if (this.selectDateInfo.fulldate) {
      currentDate = this.selectDateInfo.fulldate;
    }
    this.chooseDate = dayjs(currentDate).format("MM月DD日");
    const param = {
      type: "day",
      startTime: currentDate,
    };
    await this.pressureOnChange(param);
    await this.heartRateOnChange(param);
    await this.hrvOnChange(param);
    await this.updateChartData(currentDate);
    await this.updatePressureData(currentDate);
  },

  methods: {
    async updatePressureData(date) {
      let dateFormat = dayjs(date).format("YYYYMMDD");
      getPressureData({
        dateFormat: dateFormat,
        offsetMinutes: new Date().getTimezoneOffset(),
      })
        .then((res) => {
          this.pressure.latestOne.value = res.data.value;
          this.pressure.latestOne.time = dayjs(res.data.dateTimeFormat).format(
            "HH:mm"
          );
        })
        .catch((error) => console.log(error));
    },
    async pressureOnChange(data) {
      this.pressure.chart.setOption({
        ..._options,
        series: [
          {
            type: "line",
            barWidth: 6,
            smooth: true,
            lineStyle: {
              width: 1.5,
              color: "#CCCCCC",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbolSize: 5,
            symbol: "none",
            itemStyle: {
              color: "#AA85CB",
            },
            emphasis: {
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                color: "#c23531",
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            data: [10, 20, 50, 12, 31, 12, 23, 13, 30],
          },
        ],
      });
      return;

      const { type, startTime, endTime } = data;
      this.pressure.max = 0;
      this.pressure.min = 0;
      this.pressure.averageNum = 0;
      this.pressure.chartData = [];
      this.pressure.loading = true;
      this.resetData();

      const offsetMinutes = new Date().getTimezoneOffset();

      const params =
        type == "day"
          ? { dateStr: startTime, offsetMinutes }
          : type === "week"
          ? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
          : { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
      console.log("params", params);

      const requestMethod =
        type == "day"
          ? queryMyPressureInfoByDay
          : type == "week"
          ? queryMyPressureInfoByWeek
          : queryMyPressureInfoByMonth;

      try {
        const { data } = await requestMethod(params);

        console.log("pressureOnChange", data);

        this.pressure.loading = false;
        if (this.pressure.chart) {
          this.pressure.chart.clear();
        }
        if (!data) {
          this.resetData();
          return;
        }

        this.pressure.max = parseInt(data.max || 0);
        this.pressure.min = parseInt(data.min || 0);
        this.pressure.averageNum = parseInt(data.average || 0);
        if (!data.rates) return;
        let latestOne = data.rates[data.rates.length - 1];
        console.log("pressure latestOne", latestOne);
        const dealWith =
          type == "day" ? this.pressGetFullByDay : this.pressGetFullByOther;
        dealWith(data.rates || []);
      } catch (error) {
        console.log("heartRateOnChange error", error);
        this.resetData();
      }
    },
    async heartRateOnChange(data) {
      console.log("pressure heartRateOnChange", data);

      const { type, startTime, endTime } = data;
      this.heart.max = 0;
      this.heart.min = 0;
      this.heart.averageNum = 0;
      this.heart.healthText = "";
      this.heart.healthModelValue = 0;
      this.heart.chartData = [];
      this.heart.loading = true;
      this.resetData(1);

      const offsetMinutes = new Date().getTimezoneOffset();

      const params =
        type == "day"
          ? { dateStr: startTime, offsetMinutes }
          : type === "week"
          ? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
          : { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
      console.log("params", params);

      const requestMethod =
        type == "day"
          ? queryMyHeartInfoByDay
          : type == "week"
          ? queryMyHeartInfoByWeek
          : queryMyHeartInfoByMonth;

      try {
        const { data } = await requestMethod(params);
        if (!data) {
          this.resetData(1);
          return;
        }
        console.log("pressure heart data", data);
        this.heart.max = parseInt(data.max || 0);
        this.heart.min = parseInt(data.min || 0);
        this.heart.averageNum = parseInt(data.average || 0);
        this.heart.healthText = data?.heartbeatModel?.config?.modelZh;
        this.heart.healthModelValue = parseInt(
          data?.heartbeatModel?.value || 0
        );
        this.heart.allData = data;
      } catch (error) {
        this.heart.loading = false;
        console.log("heartRateOnChange error", error);
        this.resetData(1);
      }
    },
    async hrvOnChange(data) {
      const { type, startTime, endTime } = data;
      this.hrv.max = 0;
      this.hrv.min = 0;
      this.hrv.averageNum = 0;
      this.hrv.healthText = "";
      this.hrv.healthModelValue = 0;
      this.hrv.chartData = [];
      this.hrv.loading = true;
      this.resetData(2);

      const offsetMinutes = new Date().getTimezoneOffset();
      //  "2024-12-25"  "2024-12-31"
      const params =
        type == "day"
          ? { dateStr: startTime, offsetMinutes }
          : type === "week"
          ? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
          : { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
      console.log("params", params);

      const requestMethod =
        type == "day"
          ? queryMyHrvInfoByDay
          : type == "week"
          ? queryMyHrvInfoByWeek
          : queryMyHrvInfoByMonth;

      try {
        const { data } = await requestMethod(params);

        console.log("hrv", data);
        if (!data) {
          this.resetData(2);
          return;
        }
        this.hrv.allData = data;
        this.hrv.max = parseInt(data.max || 0);
        this.hrv.min = parseInt(data.min || 0);
        this.hrv.averageNum = parseInt(data.average || 0);
        this.hrv.healthText = data?.hrvModel?.config?.modelZh;
      } catch (error) {
        console.log("heartRateOnChange error", error);
        this.resetData(2);
      }
    },
    updateChartData(date) {
      console.log("queryMySleepInfoByDay == date ==>", date);

      queryMySleepInfoByDay({
        dateStr:
          dayjs(date).format("YYYY-MM-DD") || dayjs().format("YYYY-MM-DD"),
        offsetMinutes: new Date().getTimezoneOffset(),
      })
        .then(async (res) => {
          console.log("pressure queryMySleepInfoByDay", res.data);

          let totalMinutes = res.data.totalMinute;
          // actualSleepHours: '--',
          // actualSleepMinutes: '--',
          // recommendedSleepHours: '--',
          // recommendedSleepMinutes: '--',
          // sleepRatio: 0,
          // sleepRatioPercent: '--%'
          this.actualSleepHours = (totalMinutes / 60).toFixed(0);
          this.actualSleepMinutes = totalMinutes % 60;
          this.recommendedSleepHours = 8;
          this.recommendedSleepMinutes = 8;
          this.sleepRatio = (totalMinutes / 488).toFixed(2);
          this.sleepRatioPercent = this.sleepRatio * 100 + "%";
          // this.score = res.data.score;

          this.drawProgressCircle();
          // const sleepData = res.data;
          //
          // const userSleepDBVos = sleepData.userSleepDBVos;
          // let _sleepData = [];
          // let _timeData = [];
          // if (userSleepDBVos) {
          //   userSleepDBVos.forEach((_, i) => {
          //     _sleepData.push({
          //       type: _.value,
          //       minutes: Math.round(dayjs(_.endTime).diff(dayjs(_.startTime), "minute")),
          //     });
          //   });
          //   if (userSleepDBVos.length) {
          //     _timeData[0] = dayjs(userSleepDBVos[0].startTime).format("HH:mm");
          //     _timeData[1] = dayjs(userSleepDBVos[userSleepDBVos.length - 1].endTime).format("HH:mm");
          //   }
          // }
          //
          // this.sleepData = _sleepData;
          // this.timeData = _timeData;
          // this.sleepKey++;
          // this.dailySleepData = res.data;
        })
        .catch((error) => {
          console.log("sleep Data error", error);
        });
    },
    pressGetFullByDay(data) {
      let res = [];
      for (let i = 0; i < 24; i++) {
        const has = data.findIndex((item) => Number(item.time) === i);
        if (has != -1) {
          res.push([i.toString() + ":00", data[i].value || null]);
        } else {
          res.push([i.toString() + ":00", null]);
        }
      }
      res.sort((a, b) => Number(a[0]) - Number(b[0]));
      this.pressure.chartData = res;
    },

    pressGetFullByOther(data) {
      const cycleCount = this.selectType == "week" ? 7 : data.length;
      let res = [];
      for (let i = 0; i < cycleCount; i++) {
        res.push([dayjs(data[i].date).format("MM.DD"), data[i].value || null]);
      }
      this.pressure.chartData = res;
    },

    async resetData(type) {
      if (type == 1) {
        this.heart.chartData = [];
        this.heart.averageNum = 0;
      } else if (type == 2) {
        this.hrv.chartData = [];
        this.hrv.averageNum = 0;
      } else {
        this.pressure.chartData = [];
        this.pressure.averageNum = 0;
      }
    },

    openTip() {
      const tips = {
        tip: tip_zh,
        icon: pImage,
        title: "压力",
      };

      this.$emit("tips", tips);
    },
    drawProgressCircle() {
      this.sleepRatio = 0.78;
      const ctx = uni.createCanvasContext("sleepProgress", this);
      const width = 70; // 画布宽度
      const height = 70; // 画布高度
      const radius = 30; // 圆的半径
      const centerX = width / 2;
      const centerY = height / 2;

      // 绘制灰色背景圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.setStrokeStyle("#ccc");
      ctx.setLineWidth(10);
      ctx.stroke();

      // 绘制进度条
      ctx.beginPath();
      ctx.arc(
        centerX,
        centerY,
        radius,
        -Math.PI / 2,
        -Math.PI / 2 + 2 * Math.PI * this.sleepRatio
      );
      ctx.setStrokeStyle("#6F87FF");
      ctx.setLineWidth(10);
      ctx.stroke();

      ctx.draw();
    },
  },
};
</script>

<style lang="scss" scoped>
.pressure {
  width: 100%;
  height: 100%;

  .scroll_view {
    width: 100%;
    // height: calc(100vh - var(--status-bar-height) - 56rpx);
    height: calc(100% - 0rpx);
  }
  .w-92rpx {
    width: 92rpx;
  }

  .w-60rpx {
    width: 60rpx;
  }

  .w-70rpx {
    width: 70rpx;
  }

  .w-40rpx {
    width: 40rpx;
  }

  .w-30rpx {
    width: 30rpx;
  }

  .mr-8rpx {
    margin-right: 8rpx;
  }

  .text-#AFAFAF {
    color: #afafaf;
  }

  .chart_container {
    padding: 20rpx 30rpx;

    .head {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        font-weight: 500;
        text-align: left;
        margin-left: 12rpx;
        flex-grow: 1; // 让标题靠左
      }

      .right-arrow-icon {
        width: 32rpx;
        height: 32rpx;
      }

      .tips-icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: -360rpx;
        cursor: pointer;
      }
    }

    .refresh-tip {
      font-size: 24rpx;
      color: #999999;
      margin-top: 8rpx;
      margin-bottom: 16rpx;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    td {
      padding: 5px;
    }

    .sleep-time-cell {
      width: 45%;
    }

    .image-cell {
      width: 30%;
    }

    .progress-cell {
      width: 25%;
    }

    .progress-circle {
      width: 100px;
      height: 100px;
    }
  }

  .card {
    width: 100%;

    background-color: rgba($color: white, $alpha: 0.5);
    backdrop-filter: blur(20rpx);
    border-radius: 8px;
    height: 740rpx;

    padding: 40rpx;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .head {
      width: 100%;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .title {
        width: 100%;
        font-size: 32rpx;
        font-weight: 600;
        text-align: left;
        margin-left: 6cap;
        margin-right: 12rpx;
        display: flex;
        justify-content: space-between;
      }

      .value {
        margin-left: auto;
        font-weight: 500;
        font-size: 64rpx;

        text {
          font-size: 24rpx;
        }
      }
    }

    .chart {
      width: 100%;
      height: 400rpx;
      position: relative;

      .noData_loading_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #e3f1fb;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 150px;
        font-size: 28rpx;
        color: rgba(45, 153, 255, 1);
      }
      // background-color: #e5404f;
    }

    .range {
      display: flex;
      padding: 20rpx 52rpx 0 40rpx;
      font-weight: 500;

      .des {
        flex: 1;
        color: black;
        font-size: 32rpx;

        .desTop {
          display: flex;
          align-items: center;
          margin-bottom: 4rpx;
          white-space: nowrap;

          .titleTime {
            font-size: 28rpx;
            color: black;
            margin-left: 20rpx;
          }

          .dot {
            background: #e5404f;
            border-radius: 50%;
            width: 10rpx;
            height: 10rpx;
          }
        }

        .value {
          padding-left: 30rpx;

          .unit {
            font-size: 24rpx;
            margin-left: 8rpx;
          }
        }
      }
    }

    & + .card {
      margin-top: 40rpx;
      height: 730rpx;
    }

    &.noDay.pressure {
      height: 640rpx;
    }
  }

  .info {
    color: black;
    padding: 40rpx;

    .info-title {
      height: 60rpx;
      display: flex;
      align-items: center;
      font-family: PingFang HK;
      font-size: 36rpx;
      font-weight: 600;
      line-height: 50px;
      text-align: left;
      padding: 40rpx 0;

      .value {
        margin-left: auto;
      }
    }

    .info-content {
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 300;
      line-height: 40rpx;
      text-align: left;
    }
  }
}
.score-container {
  margin-bottom: 40rpx;
}
.score-box {
  margin-top: 38rpx;
  text-align: center;

  .score-title {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 8rpx;
  }

  .score-value {
    font-size: 128rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 42rpx;
  }

  .score-desc {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    .score-desc-item {
      display: flex;
      align-items: center;
      .score-block {
        width: 5px;
        height: 5px;
        background: rgba(153, 153, 153, 1);
        border-radius: 1px;
      }
      .score-line {
        width: 60px;
        height: 2px;
      }
      .line-left {
        background: linear-gradient(
          90deg,
          rgba(153, 153, 153, 0) 0%,
          rgba(153, 153, 153, 1) 100%
        );
      }
      .line-right {
        background: linear-gradient(
          90deg,
          rgba(153, 153, 153, 1) 0%,
          rgba(153, 153, 153, 0) 100%
        );
      }
    }
    .score-desc-text {
      margin: 0 10px;
    }
  }
}

.advice-box {
  .advice-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #5667f8;
    margin-bottom: 16rpx;
  }

  .advice-content {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24rpx;
  }

  .ai-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 24rpx;
    color: #2d99ff;
  }
}
.chart_item {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  position: relative;

  box-shadow: 0px -1px 6px 0px rgba(255, 255, 255, 0.25) inset;
}

.half-card-parent {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.half-card {
  width: 48%;
  margin-top: 40rpx;
  background-color: rgba($color: white, $alpha: 0.5);
  backdrop-filter: blur(20rpx);
  border-radius: 8px;
  height: 250rpx;

  padding: 40rpx;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .head {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      text-align: left;
      //margin-left: 6cap;
      margin-right: 12rpx;
    }
  }
}
.sleep-container {
  display: flex;
  align-items: center;
  .sleep-info-container {
    flex-shrink: 0;
    .sleep-item {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
  .sleep-line-container {
    width: 88px;
    height: 34px;
    margin: 0 10px;
  }

  .progress-container {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
  }

  .progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #6f87ff;
  }
}

.info-icon {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.2) !important;
}
.title-text {
  display: flex;
  align-items: center;
}
.title-content {
  margin-right: 8px;
}
</style>
